<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>时间倒计时</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      html,
      body {
        width: 100%;
        height: 100vh;
        font-size: 16px;
      }

      #box_01 {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        top: 0;
        z-index: 10;
        width: 0;
        height: 100vh;
        background-color: #f00;
        overflow: hidden;
        transition: all 0.5s;
      }

      .btn2 {
        width: 100px;
        height: 50px;
        text-align: center;
      }

      input {
        border: 0.5px solid #ddd;
        outline: none;
        height: 22px;
        line-height: 22px;
        font-size: 16px;
        text-indent: 4px;
        border-radius: 4px;
      }

      .ipt_el_class {
        width: 40px;
      }
    </style>
  </head>

  <body>
    <input
      type="text"
      id="ipt_el_01"
      value="0"
      onfocus="this.value = ''"
      onblur="if(this.value == ''){this.value = '0'}"
      placeholder="时"
      class="ipt_el_class"
    />
    <input
      type="text"
      id="ipt_el_02"
      value="0"
      onfocus="this.value = ''"
      onblur="if(this.value == ''){this.value = '0'}"
      placeholder="分"
      class="ipt_el_class"
    />
    <input
      type="text"
      id="ipt_el_03"
      value="0"
      onfocus="this.value = ''"
      onblur="if(this.value == ''){this.value = '0'}"
      placeholder="秒"
      class="ipt_el_class"
    />

    <button onclick="btn1CallBack()">开启(本按钮选中回车也可以)</button>
    <div
      >剩余时间：<span id="TimeRemaining"></span
      >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;到点<span id="TimeOfArrival"></span
    ></div>
    <div id="box_01">
      <button onclick="btn2CallBack()" class="btn2">关闭</button>
    </div>

    <div>
      提醒事项：<input
        type="text"
        id="ipt_el_04"
        value=""
        placeholder="提醒事项"
        style="width: 230px"
        onfocus="this.value = ''"
        onblur="noticeBlur(this)"
      />
    </div>

    <script>
      let timer1 = null;
      let timer2 = null;
      let updateTitle = true;
      document.getElementById('ipt_el_01').focus();

      function noticeBlur(el) {
        console.log(`remind.html 86`, el.value);
        updateTitle = true;
      }

      // 开启(本按钮选中回车也可以)
      function btn1CallBack() {
        let getTime_01 =
          parseInt(document.getElementById('ipt_el_01').value) || 0;
        let getTime_02 =
          parseInt(document.getElementById('ipt_el_02').value) || 0;
        let getTime_03 =
          parseInt(document.getElementById('ipt_el_03').value) || 0;
        let TotalTime = getTime_01 * 3600 + getTime_02 * 60 + getTime_03; // 获取多少秒
        document.getElementById('TimeRemaining').innerHTML = ''; // 剩余时间
        let endTime = +new Date() + TotalTime * 1000;
        document.getElementById('TimeOfArrival').innerHTML = dateFtt(
          endTime,
          'hh:mm:ss'
        ); // 到点时间
        if (timer1) {
          clearTimeout(timer1);
        }
        timer1 = setTimeout(() => {
          document.getElementById('box_01').style.width = '100%';
        }, TotalTime * 1000);

        let timeCunt = TotalTime; // 剩余时间
        if (timer2) {
          updateTitle = true;
          clearTimeout(timer2);
        }
        timer2 = setInterval(() => {
          if (timeCunt > 0) {
            let ipt_04Val = document.getElementById('ipt_el_04').value;
            if (updateTitle && ipt_04Val) {
              updateTitle = false;
              document.title = ipt_04Val;
            }
            timeCunt--;
            document.getElementById('TimeRemaining').innerHTML =
              getTime(timeCunt);
          } else {
            updateTitle = true;
            clearTimeout(timer2);
          }
        }, 1000);
      }

      function btn2CallBack() {
        document.getElementById('box_01').style.width = '0';
        document.getElementById('ipt_el_01').value = 0;
        document.getElementById('ipt_el_02').value = 0;
        document.getElementById('ipt_el_03').value = 0;
        document.getElementById('TimeRemaining').innerHTML = '';
        document.getElementById('TimeOfArrival').innerHTML = '';
      }

      function getTime(timeCunt = 0) {
        let nHour = 0;
        let nMinutes = 0;
        let nSeconds = 0;
        if (timeCunt > 60 * 60) {
          nHour = Math.floor(timeCunt / (60 * 60));
          nMinutes = Math.floor((timeCunt - nHour * 60 * 60) / 60);
          nSeconds = ~~(timeCunt - nHour * 60 * 60 - nMinutes * 60);
        } else if (timeCunt > 60) {
          nMinutes = Math.floor(timeCunt / 60);
          nSeconds = ~~(timeCunt - nMinutes * 60);
        } else {
          nSeconds = timeCunt;
        }
        nMinutes = nMinutes < 10 ? '0' + nMinutes : nMinutes;
        nSeconds = nSeconds < 10 ? '0' + nSeconds : nSeconds;
        if (nHour) {
          return `${nHour}时${nMinutes}分${nSeconds}秒`;
        } else if (nMinutes) {
          return `${nMinutes}分${nSeconds}秒`;
        } else {
          return `${nSeconds}秒`;
        }
      }

      /*
       * 转换时间
       * dateFtt(1565059668200,"yyyy-MM-dd hh:mm:ss") => '2019-08-06 10:47:48'
       * dateFtt(1565059668200,"yyyy-MM-dd") => '2019-08-06'
       */
      function dateFtt(date, fmt) {
        if (date != null && date != '' && date != undefined) {
          if (typeof date == 'string') {
            date = date.replace(/-/g, '/');
          }
          var date = new Date(date);
          var o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds(),
            'q+': Math.floor((date.getMonth() + 3) / 3), //季度
            S: date.getMilliseconds(), //毫秒
          };
          o.S < 100 && (o.S = o.S < 10 ? '00' + o.S : '0' + o.S);
          if (/(y+)/.test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              (date.getFullYear() + '').substr(4 - RegExp.$1.length)
            );
          for (var k in o)
            if (new RegExp('(' + k + ')').test(fmt))
              fmt = fmt.replace(
                RegExp.$1,
                RegExp.$1.length == 1
                  ? o[k]
                  : ('00' + o[k]).substr(('' + o[k]).length)
              );
        } else {
          fmt = '';
        }
        return fmt;
      }
    </script>
  </body>
</html>
